<template>
	<div class="active">
		<div class="fixed">
			<div class="title flex">
				<div class="title_left">
					<img @click="back" src="../assets/image/return.png" />
				</div>
				<div class="add">
					输入验证码
				</div>
				<div>
				</div>
			</div>

		</div>
		<div class="lists">

			 <p>输入验证码</p>
			 <div class="code flex">
			 	<div class="code_phone">
			 		<span>已发送至</span><span>{{phone}}</span>  
			 	</div>
			 	<div id="code_s">
			 		{{delayTime}}S
			 	</div>
			 </div>
			   
			   <div id="wrap" class="flex">
   
      <input type="text" v-model="code1"  oninput="if(value.length>1)value=value.slice(0,1)" />
      <input type="text"  v-model="code2"  oninput="if(value.length>1)value=value.slice(0,1)"/>
      <input type="text"  v-model="code3"   oninput="if(value.length>1)value=value.slice(0,1)"/>
      <input type="text"  v-model="code4"  oninput="if(value.length>1)value=value.slice(0,1)"/>
    </div>
			  <div class="btns" @click="skipto_setpassword">
			  	下一步
			  </div>
             <div  class="send">
             	收不到验证码<span class="sends" @click="send">重新发送</span> 
             </div>
			</div>
		</div>
	</div>

	</div>

</template>

<script>
	export default {
		data() {
			return {
				delayTime: 30,
				code1: '',
				code2: '',
				code3: '',
				code4: '',
				phone: localStorage.getItem("phone"),
			}
		},
		//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		created: function() {

		},
		methods: {
			back() {
				this.$router.go(-1)
			},

			skipto_register() {
				this.$router.push({
					path: '/register'
				});
			},

			code() {
				var txts = document.querySelectorAll("input");

				for (var i = 0; i < txts.length; i++) {
					var t = txts[i];

					t.index = i;

					t.setAttribute("readonly", true);
					t.onkeyup = function() {
						this.value = this.value.replace(/^(.).*$/, '$1');
						var next = this.index + 1;
						if (next > txts.length - 1) return;
						txts[next].removeAttribute("readonly");
						txts[next].focus();

					}
				}
				txts[0].removeAttribute("readonly");
			},
			countDown() {
				var that = this
				that.delayTime -= 1
				var t = setTimeout(function() {
					that.countDown()
				}, 1000)
				if (that.delayTime <= 0) {
					clearTimeout(t);
					that.delayTime = 0;
					$(".sends").css("color", "#007AFF")
				} else {
					$(".sends").css("color", "#868E91")
				}


			},
			skipto_setpassword() {
				var that = this;
				var codes = that.code1 + that.code2 + that.code3 + that.code4;
				if (codes.length < 4) {
					this.$message.error('请输入四位验证码');

				}
				var qs = require('qs');
			that.$http.post(this.baseURL+"/index.php/waveguest/login/sms_code", qs.stringify({
						"store_mobile": that.phone,
						"code": codes,
					})).then(response => {
						console.log(response)
						if(response.data.status=="200"){
							
								 this.$router.push({
					path: '/setpassword'
				});
						}else{

							this.$message.error('验证码错误');
						}


					})
					.catch(error => {

					});






			},
			send() {
				if (this.delayTime == "0") {
					var that = this;

					localStorage.setItem("phone", that.phone)
					var qs = require('qs');
					that.$http.post("http://api.heruinet.com/index.php/waveguest/login/sms_send", qs.stringify({
							"store_mobile": that.phone,
						})).then(response => {
							if (response.status == "200") {
								this.$message.success('发送成功');
								that.delayTime = 30;
								that.countDown()
							} else {
								this.$message.error('发送失败');
							}


						})
						.catch(error => {

						});
				}
			}


		},
		mounted() {
			this.code()
			this.countDown()
			this.send()
		},
	}
</script>

<style>
	.el-message {
		min-width: 4rem;
		top: 40% !important;
	}
</style>
<style scoped="scoped">
	.active {

		position: fixed;
		top: 0;
		width: 100%;
		max-width: 640px;
		height: 100%;
	}

	.title_left {
		width: 0.67391rem;
		height: 0.67391rem;
	}

	.lists {
		padding: 2rem;

	}

	.lists P {
		font-size: 0.91304rem;
	}

	.title_left>img {
		width: 0.67391rem;
		height: 0.67391rem;
	}

	.title {
		width: 90%;
		padding: 0 5% 0 5%;
		height: 2rem;
		font-size: 0.7193rem;
		background: white;
		align-items: center;
	}

	.title div {
		width: calc(100%/3);
		align-items: center;
	}

	.title>div:nth-child(2) {
		text-align: center;
	}

	.code {
		font-size: 0.60869rem;
		color: #868E91;
		justify-content: space-between;
		align-items: center;
		padding-top: 0.5rem;
	}

	.code_phone>span:nth-child(2) {
		color: #3E474E;
		padding-left: 0.3rem;
	}

	#code_s {
		color: #007AFF;
	}

	.inp {
		padding-top: 2rem;
	}

	.inp>p {
		color: #D1D5D8;
		font-size:0.562517rem;
		padding-bottom: 0.5rem;
	}

	.inp>input {
		width: 100%;
		height: 1.5rem;
		border: none;
		border-bottom: 1px solid gray;
	}

	.btns {
		width: 100%;
		height: 2.1913rem;
		background: #007AFF;
		border-radius: 0.47826rem;
		text-align: center;
		line-height: 2.3913rem;
		color: white;
		font-size: 0.7826rem;
		margin-top: 6rem;
	}

	#wrap {
		width: 100%;
		justify-content: space-between;
	}

	#wrap>input:focus {
		border: 1px solid #007AFF;
	}

	#wrap>input {
		width: 2.3043rem;
		height: 2.3043rem;
		margin-top: 2rem;
		border: 1px solid #D1D5D8;
		border-radius: 0.47826rem;
		text-align: center;
		line-height: 2.3043rem;
		font-size: 0.8695rem;
		font-weight: 600;
	}

	.send {
		width: 100%;
		height: 1.5rem;
		font-size: 0.56521rem;
		color: #868E91;
		line-height: 1.5rem;
		text-align: center;
	}

	.send span {
		padding-left: 0.3rem;
		/*color: #007AFF;*/
	}
</style>
